<template>
    <div class="out_box">
        <headers />

        <div class="relative content_box">
            <div class="form_box">
                <v-form direction="horizontal">
                    <v-form-item class="border" label="算力周期" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text">{{ '130 天' }}</span>
                    </v-form-item>
                    <v-form-item class="border" label="算力" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text">{{ '100 TH/S' }}</span>
                    </v-form-item>
                    <v-form-item class="border has_tips" label="到期时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text">{{ '2020/12/19  00:00:00' }}</span>
                    </v-form-item>
                    <v-form-item class="border has_tips" label="算力费" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <p class="ant-form-text bold font_orange">{{ '$ 375' }}</p>
                        <p class="tips " id="userName" name="userName">{{ '≈ ￥2625.00' }}</p>
                    </v-form-item>
                    <v-form-item class="border has_tips" label="电费" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <p class="ant-form-text bold font_orange">{{ '$ 375' }}</p>
                        <p class="tips " id="userName" name="userName">{{ '≈ ￥2625.00' }}</p>
                    </v-form-item>
                    <v-form-item class="border" label="机位费" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <p class="ant-form-text bold">{{ '$ 375' }}</p>
                        <p class="tips " id="userName" name="userName">{{ '≈ ￥2625.00' }}</p>
                    </v-form-item>
                    <v-form-item class="border" label="维修费" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <p class="ant-form-text bold">{{ '$ 375' }}</p>
                        <p class="tips " id="userName" name="userName">{{ '≈ ￥2625.00' }}</p>
                    </v-form-item>
                    <v-form-item class="border" label="购买数量" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text">{{ '200 份' }}</span>
                    </v-form-item>
                    <v-form-item class="border has_tips" label="优惠券" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text">{{ '130 天' }}</span>
                    </v-form-item>
                    <v-form-item class="border" label="订单金额" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text bold font_orange">{{ '$ 10000.00' }}</span>
                    </v-form-item>
                    <v-form-item class="border" label="优惠券" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text">{{ '暂无优惠券' }}</span>
                    </v-form-item>
                    <v-form-item class="border" label="实际支付" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text bold font_orange">{{ '$ 9900.00' }}</span>
                    </v-form-item>
                    <v-form-item class="border" label="支付方式" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text bold">{{ '使用数字货币支付' }}</span>
                    </v-form-item>
                    <v-form-item class="border" label="支付时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text">{{ '2020/01/01 20:10:10' }}</span>
                    </v-form-item>
                    <v-form-item class="border" label="订单状态" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <span class="ant-form-text bold">{{ '购买成功' }}</span>
                    </v-form-item>
                </v-form>
            </div>
        </div>
        
        <footers />
    </div>
</template>

<script>
    import Headers from '@components/header/header.vue';
    import Footers from '@components/footer/footer.vue';

    export default {
        name: "OrderDetail",
        components: {
            Headers,
            Footers
        },
        data: function() {
            return {
                dataForm: {},
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 14
                },
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            }
        },
        methods: {
        },
        mounted: function() {
            let tipsHTML = `
                <i class="iconfont">&#xe7ac;</i>
            `;
            $('.has_tips>.ant-form-item-label').append(tipsHTML);
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
        background-color: #eaeaea;
    }
    .content_box{
        .content_spacing;
        /deep/ .ant-form-item{
            padding: 30px 0;
            margin-bottom: 0;
            font-size: 16px;
            color: #333;
            &.border{
                border-bottom: 1px solid #efeff4;
            }
            &.bold label{
                font-size: 18px;
                color: #333;
            }
        }
        /deep/ .ant-form-item-label{
            width: 22%;
            padding-left: 50px;
            text-align: left;
            label{
                font-size: 16px;
                .font_gray;
                vertical-align: text-bottom;
            }
            .iconfont{
                .font_gray;
                vertical-align: text-bottom;
            }
        }
        .form_box{
            margin: 40px auto;
            background-color: white;
            .tips{
                font-size: 14px;
                .font_gray;
            }
        }
    }
</style>
